<template>
  <view>
    <!-- 1 搜索框 start -->
    <YgSearch></YgSearch>
    <!-- 1 搜索框 end -->

    <!-- 2 轮播图 start -->
    <!--  
       设置轮播图标签的高 等于 图片标签的高 （图片 高 等比例 宽度变化）
       1 比例 公式
          原图片的宽度 (750)/原图片的高度(340) = 拉伸后的图片的宽(100vw 或者 750rpx) / 拉伸后的图片的高(340rpx)
      -->
    <u-swiper
      :height="340"
      :list="swiperdata"
    ></u-swiper>
    <!-- 2 轮播图 end -->

    <!-- 3 导航 start -->
    <view class="catitems u-flex">
      <navigator
        class="u-flex-1 u-padding-15"
        v-for="item in catitems"
        :key="item.name"
      >
        <u-image
          width="100%"
          mode="widthFix"
          :src="item.image_src"
        ></u-image>
      </navigator>
    </view>
    <!-- 3 导航 end -->

    <!-- 4 楼层 start -->
    <view class="floordata">
      <view
        class="floordata-group"
        v-for="(item1,index1) in floordata"
        :key="index1"
      >
        <view class="floordata-group-title">
          <u-image
            width="100%"
            mode="widthFix"
            :src="item1.floor_title.image_src"
          ></u-image>
        </view>
        <view class="floordata-group-list">
          <view
            class="floordata-item"
            v-for="(item2,index2) in item1.product_list"
            :key="item2.name"
          >
            <image
              v-if="index2===0"
              mode="widthFix"
              :src="item2.image_src"
            ></image>
            <image
              v-else
              :src="item2.image_src"
            ></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 4 楼层 end -->

  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      swiperdata: [],
      // 导航数据
      catitems: [],
      // 首页楼层
      floordata: [],
    };
  },
  // 小程序 onLoad
  async onLoad() {
    this.getHomeSwiperData();
    this.getHomeCatitems();
    this.getHomeFloordata();
  },
  methods: {
    /**
     * 获取首页轮播图数据 和渲染
     */
    async getHomeSwiperData() {
      // 使用uview的内置发送请求的写法是ok
      const res = await this.$u.api.getHomeSwiperData();
      // 根据 uview swper组件的要求 修改我们的数据
      this.swiperdata = res.message.map((v) => ({
        ...v,
        image: v.image_src,
      }));
    },

    /**
     * 获取首页导航数据 渲染
     */
    async getHomeCatitems() {
      const res = await this.$u.api.getHomeCatitems();
      this.catitems = res.message;
    },

    /**
     * 获取首页楼层
     */
    async getHomeFloordata() {
      const res = await this.$u.api.getHomeFloordata();
      this.floordata = res.message;
    },
  },
};
</script> 


<style lang="scss" >
.floordata {
  .floordata-group {
    .floordata-group-title {
    }

    .floordata-group-list {
      .floordata-item {
        float: left;
        width: 33.33%;
        image {
          width: 100%;
        }

        // 前四张
        // &:nth-child(-n+4){
        &:nth-last-child(-n + 4) {
          // 后四张
          image {
            // rpx 单位   设计稿     假设设计稿的宽度 375px
            // 1px = 2rpx
            height: 208rpx;
            // 图片自带3px间隙  
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>

